<template>
  <div class="crudTemplagePage">
    <div
      id="container"
      v-loading="loading"
      style="width: 100%;flex:1;"
    >
      <el-table
        id="table"
        :data="tableData"
        :header-cell-style="{color: '#666'}"
        :row-style="{color: '#666'}"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-if="tableOption.selection"
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableColumnData"
          :key="index"
          :prop="item.prop"
          :min-width="`${item.minWidth}px`"
          :label="item.label"
          :align="item.align || tableOption.align"
          :sortable="item.sortable"
        >
          <template slot="header">
            <el-tooltip
              :disabled="!!!item.tips"
              effect="dark"
              :open-delay="1000"
              :content="item.tips"
              placement="top-start"
            >
              <div>
                <span>{{ item.label }}</span>
                <i
                  v-if="item.tips"
                  class="el-icon-question"
                ></i>
              </div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <div v-if="item.slot">
              <slot
                :name="item.prop"
                :row="scope.row"
              ></slot>
            </div>
            <div
              v-else-if="item.formatter"
              v-html="item.formatter(scope.row)"
            ></div>
            <div
              v-else
              :style="item.limitLine ? limitLineStyle(item.limitLine) : ''"
            >
              {{ scope.row[item.prop] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="tableOption.menu"
          align="center"
          fixed="right"
          label="操作"
          :width="tableOption.menuWidth || 100"
        >
          <template slot-scope="scope">
            <slot
              name="menu"
              :row="scope.row"
            ></slot>
          </template>
        </el-table-column>
        <div slot="empty">
          <slot name="empty">
            暂无数据
          </slot>
        </div>
      </el-table>
    </div>
    <page-pagination
      ref="pagination"
      style="margin-top:20px"
      :total="total"
      @pagination-change="paginationChange"
    ></page-pagination>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
import PagePagination from '@/components/PagePagination/index.vue'
import { TableOptions, TableColumnOptions } from '@/models/tableOptions'
import { isEmpty, isNotEmpty } from '@/utils/validate'

@Component({
  components: {
    PagePagination
  }
})
export default class Page extends Vue {
  @Prop({ required: true }) loading!: boolean
  @Prop({ required: true }) total!: number
  @Prop({ required: true }) tableData!: any
  @Prop({ required: true }) tableOption!: TableOptions

  @Emit()
  paginationChange() {}

  getPaginationParams() {
    return (this.$refs.pagination as any).getPaginationParams()
  }

  @Emit()
  handleSelectionChange(val: any) {
    return val
  }

  @Emit()
  sortChange(val: any) {
    const sortObj: any = {}
    if (val.order === 'descending') {
      sortObj.descs = val.prop
      sortObj.ascs = ''
    } else {
      sortObj.descs = ''
      sortObj.ascs = val.prop
    }
    return sortObj
  }

  resetPaginationParams() {
    (this.$refs.pagination as any).resetPaginationParams()
  }

  get tableColumnData() {
    console.log(this.tableOption)
    return this.tableOption.cloumns
      .filter(
        (item: TableColumnOptions) =>
          isEmpty(item.permission) ||
          (item.permission && this.$hasPermission(item.permission))
      )
      .filter((item: TableColumnOptions) => isEmpty(item.hide) || !item.hide)
  }

  private limitLineStyle(line: number) {
    return {
      display: '-webkit-box',
      '-webkit-box-orient': 'vertical',
      '-webkit-line-clamp': line,
      overflow: 'hidden'
    }
  }
}
</script>

<style lang="scss" scoped>
.crudTemplagePage {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
